<template>
  <div class="tree">
    <div class="tree-content">
      <span>菜单列表</span>
      <el-tree
        class="tree-line"
        :data="data"
        :indent="0"
        node-key="id"
        :props="defaultProps"
        :default-expand-all="true"
      >
        <div slot-scope="{ node }" class="element-tree-node-label-wrapper">
          <span>{{ node.label }}</span>
          <span class="element-tree-node-line-ver"></span>
          <span class="element-tree-node-line-hor"></span>
        </div>
      </el-tree>
    </div>
    <div class="tree-content">
       图标：{{selectIcon}}
      <SelectIcon v-model="selectIcon"></SelectIcon>
    </div>
    <div class="tree-content">
      <a href="https://www.javasoho.com/vuetreeselect/index_cn.html" target>VueTreeselect</a>
    </div>
    <div class="tree-content">
      <i class="iconfont icon-shouye"></i>
    </div>
  </div>
</template>

<script>
import SelectIcon from '@/components/SelectIcon/index.vue'
export default {
  name: 'TreeIndex',
  components: {
    SelectIcon
  },
  data () {
    return {
      selectIcon: '',
      data: [
        {
          label: '一级 1',
          children: [
            {
              label: '二级 1-1',
              children: [
                {
                  label: '三级 1-1-1'
                },
                {
                  label: '三级 1-1-1'
                }
              ]
            },
            {
              label: '二级 1-2',
              children: [
                {
                  label: '三级 1-2-1'
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    selectIconEvent (node) {
      console.log(node)

      return false
    }
  }
}
</script>

<style lang="scss">
.tree {
  width: 100%;
  height: 100%;
  &-content {
    float: left;
    width: 49%;
    height: 50%;
    margin: 2px;
    background-color: #fff;
  }
}
</style>
